<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<body>
    <div class="container">
        <button id="borrow">图书借阅</button>
        <hr/>
        <form class="form-horizontal" onsubmit="return false">
            <div class="form-group">
                <label for="account" class="col-sm-2 control-label">查询</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="account" placeholder="请输入用户账号">
                    <button id="search">查询</button>
                </div>

            </div>

        </form>
        <div id="content">
            <table class="table">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>图书编号</td>
                    <td>图书名称</td>
                    <td>借书人</td>
                    <td>借书时间</td>
                    <td>还书时间</td>
                    <td>状态</td>
                </tr>
                </thead>
                <tbody id="info">

                </tbody>
            </table>
        </div>
    </div>
</body>
<script>

    $(function () {

        $("#borrow").click(function(){
            location.href="/borrow/bkBorrow";
        })
        $("#search").click(function(){
            $("#info").empty();
            $.ajax({
                url:"/borrow/findBorrow/"+$("#account").val(),
                type:"get",
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    $.each(data,function (index,val) {
                        var str = `<tr>
                                        <td>${index+1}</td>
                                        <td>${val.booknum}</td>
                                        <td>${val.bookname}</td>
                                        <td>${val.username}</td>
                                        <td>${val.presstime==null?'':val.presstime}</td>
                                        <td>${val.backtime==null?'':val.backtime}</td>
                                        <td>${val.state=='借阅'?'<a onclick="back('+val.booknum+',this)" href="javascript:void(0)">归还</a>':val.state}</td>

                                    </tr>`;
                        $("#info").append(str)
                    })

                }
            })
        })
    })
    function back(id,_this){
        $.ajax({
            url:"/borrow/back/"+id,
            dataType:"json",
            type:"get",
            success:function(data){
                if(data.code==200){
                    alert("归还成功")
                    location.reload()
                }
            }
        })
    }


</script>
</html>